<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        container{
  margin: 20px auto;
  padding:0 15px;
  width: 50%; 
  height:300px;
  box-sizing: border-box;  
 }
 .text-container{
  display: inline-block;
  float:left;
  width: 15%;
  height: 32px;
  line-height: 32px;
  box-sizing: border-box;
 }
 .selectContainer{
  width: 70%;
  height:200px;
  float:left;
  position: relative;
  padding:0;
  margin:0;
  box-sizing: border-box;
 }
 .selectedContent{
  width:85%;
  height: 25px;
  float:left;   
 }
 .dropDown-toggle{
  width:14%;
  height:31px;
  line-height: 31px;
  text-align: center;
  border: 1px solid silver;
  border-left:none;
  float:left;
  padding:0;
  margin:0;
  box-sizing: border-box;
  cursor: pointer;
 }
 .dropDown-menu{
  margin:0;
  padding:0 15px 10px;
  width:100%;
  border:1px solid silver;
  border-top: none;
  box-sizing: border-box;
  list-style: none;
  position: absolute;
  top:31px;
  right:0;
 }
 .items{
  margin-top:8px;
  padding: 2px;
  cursor: pointer;
 }
 .items:hover{
  background: #ddd;
 }
 .isSelectedText{
  display: inline-block;
  width:90%;
 }
 .dsn{
  display: none;
 }
    </style>
    <script src="jquery-3.3.1.min.js"></script>
</head>
<body>
    <div class="container">
        <span class="text-container">最爱的水果</span>
        <div class="multipleSelect selectContainer">
         <input type="text" class="selectedContent">
         <div class="dropDown-toggle">选择</div>
         <ul class="dropDown-menu dsn">
          <li class="items">
           <span class="isSelectedText">苹果</span>
           <span class="isSelected"><input type="checkbox"></span>
          </li>
          <li class="items">     
           <span class="isSelectedText">梨</span>
           <span class="isSelected"><input type="checkbox"></span>
          </li>
          <li class="items">
           <span class="isSelectedText">橘子</span>
           <span class="isSelected"><input type="checkbox"></span>
          </li>
          <li style="text-align: right">
           <button type="button" class="confirmSelect">确定</button>
          </li>
         </ul>
        </div>
       </div>
<script>
$('.isSelected input[type=checkbox]').on('click', function(){
   var selectedItems = $(this).parents('.dropDown-menu').prevAll('.selectedContent').val().split(' ');
   var thisItem = $(this).parent().prev().text();
   var isExisted = 0;
   var isChecked = $(this).is(':checked');
   if(isChecked){
    selectedItems.map(function(item, index){
     if(item === thisItem){
      isExisted++
     }
    });
    if(!isExisted){
     selectedItems.push(thisItem)
    }
   }
   else{
    selectedItems.map(function(item, index){
     if(item === thisItem){
      selectedItems.splice(index, 1);
     }
    });
   }
   $(this).parents('.dropDown-menu').prevAll('.selectedContent').val(selectedItems.join(' '));
  })
  $('.confirmSelect').on('click', function(){
   $(this).parents('.dropDown-menu').addClass('dsn');
  })
  $('.dropDown-toggle').on('click', function(){
   $(this).next().toggleClass('dsn')
  });
</script>
</body>
</html>